<template>
  <view :class="classNames">
    <template v-if="optionstion.length > 0">
      <a-checkbox
        v-for="item in optionstion"
        :key="item"
        :value="item.value"
        :disabled="item.disabled || (!getCheckt(item.value) && isMaxed)"
        :indeterminate="item.indeterminate"
        :model-value="getCheckt(item.value)"
      >
        <template #default>
          <slot v-if="$slots.label" :data="item" name="label"> </slot>
          <template v-else> {{ item.label }} </template>
        </template>
      </a-checkbox>
    </template>
    <template v-else>
      <slot></slot>
    </template>
  </view>
</template>

<script lang="ts">
import { useFormItem } from "@/ArcoUni/hook/use-form-item";
import { isArray, isNumber, isString } from "@/utils/is";
import {
  computed,
  defineComponent,
  provide,
  reactive,
  ref,
  toRefs,
  watch,
} from "vue";
import aCheckbox from "../arco-checkbox/index.vue";
import context from "./content";
const Switch = defineComponent({
  name: "SwitcH",
  options: {
    // 虚拟化节点
    virtualHost: true,
  },
  components: {
    aCheckbox,
  },
  props: {
    modelValue: {
      type: Array,
      default: void 0,
    },
    defaultValue: {
      type: Array,
      default: () => [],
    },
    max: {
      type: Number,
      default: void 0,
    },
    options: {
      type: Array,
      default: void 0,
    },
    direction: {
      type: String,
      default: "horizontal",
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  emits: ["update:modelValue", "change"],
  setup(props, { emit }) {
    const { disabled } = toRefs(props);
    const prefixCls = "arco-checkbox-group";

    const { mergedDisabled, eventHandlers } = useFormItem({
      disabled,
    });
    const _value = ref(props.defaultValue);
    const computedValue = computed(() =>
      isArray(props.modelValue) ? props.modelValue : _value.value,
    );
    const isMaxed = computed(() =>
      props.max === void 0 ? false : computedValue.value.length >= props.max,
    );
    const optionstion = computed(() => {
      var _a;
      return ((_a = props.options) != null ? _a : []).map((option) => {
        if (isString(option) || isNumber(option)) {
          return {
            label: option,
            value: option,
          };
        }
        return option;
      });
    });

    const handleChange = (value, e) => {
      _value.value = value;
      emit("update:modelValue", value);
      emit("change", value, e);
      const handlers = eventHandlers.value;
      if (handlers && handlers.onChange) {
        try {
          handlers.onChange(e);
        } catch (error) {
          console.error("Error calling onChange handler:", error);
        }
      }
    };

    provide(
      context.checkboxGroupKey,
      reactive({
        name: "ArcoCheckboxGroup",
        computedValue,
        disabled: mergedDisabled,
        isMaxed,
        handleChange,
      }),
    );
    watch(
      () => props.modelValue,
      (curValue) => {
        if (isArray(curValue)) {
          _value.value = [...curValue];
        } else {
          _value.value = [];
        }
      },
    );

    // 获取当前的选中状态
    function getCheckt(value) {
      return computedValue.value.includes(value);
    }

    const classNames = computed(() => {
      return [prefixCls, `${prefixCls}-direction-${props.direction}`];
    });

    return {
      prefixCls,
      classNames,
      isMaxed,
      mergedDisabled,
      handleChange,
      optionstion,
      computedValue,
      getCheckt,
    };
  },
});
export default Switch;
</script>
